require('./Rollup.styl');
const classNames = require('classnames');
const { Boxs, Icon } = SaltUI;
const { HBox, Box } = Boxs;
const RollItem = require('components/rollitem')
class Rollup extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isUp: false,
        };
    }
    clickIcon() {
        this.setState({ isUp: !this.state.isUp });
    }
    render() {
        let t = this;
        return (
            <div className="rollup ">
                <HBox  vAlign="center" onClick={this.clickIcon.bind(this)} >
                    <Box flex={1} className={classNames("ft16 t-ML23", { 'select-color': this.state.isUp })} >{t.props.data.subject}</Box>
                    <Box flex={1} className='t-FAR t-MR23 angle'>
                        {this.state.isUp ? <Icon name="angle-up" width={24} height={24} /> : <Icon name="angle-down" width={24} height={24} />}
                    </Box>
                </HBox>
                {t.state.isUp && (t.props.data.content instanceof Array?t.props.data.content.map((item, index) => {
                    return (<RollItem {...item}/>);
                })
                :
                <RollItem {...t.props.data.content}/>)
                }
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}
Rollup.defaultProps = {
    content: []
};
module.exports = Rollup;
